<!--
 * @Description: Suspense  内置组件，实验性的，每个插槽只能包裹一个根节点，并且default插槽所有节点返回才会显示
 * @Description: Suspense  当渲染一个组件，并且该组件在setup异步请求数据时，首先显示fallback内容
 * @Author: dh
 * @Date: 2022-01-21 13:41:19
 * @LastEditors: dh
 * @LastEditTime: 2022-07-18 14:36:38
-->
<template>
	<Suspense>
		<template #default>
			<div>
				<div>1</div>
				<test :time="3000" />
				<test :time="5000" />
			</div>
		</template>
		<template #fallback>
			<div>Loading...</div>
		</template>
	</Suspense>
</template>

<script lang="ts">
import { defineComponent, defineAsyncComponent, onErrorCaptured } from 'vue';

export default defineComponent({
	components: {
		test: defineAsyncComponent(() => import('./components/test.vue')),
	},
	setup() {
		// 错误捕获
		onErrorCaptured(err => {
			console.log(err);

			// 是否向上传播，true 传播，false 不传播
			return true;
		});
		return {};
	},
});
</script>

<style scoped></style>
